<template>
  <div>
    <h2>mytable组件</h2>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <h2>表格插槽与作用域插槽</h2>
    <el-table :data="list" style="width: 80%" border>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="gender" label="性别">
        <template v-slot="scope">
          <b>{{ scope.row.gender === 1 ? "男" : "女" }}</b>
        </template>
      </el-table-column>
    </el-table>

    <h2>表格插入图片</h2>

    <el-table :data="list" style="width: 80%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="icon" label="头像">
        <template v-slot="scope">
          <img :src="scope.row.icon" alt="" width="100" />
        </template>
      </el-table-column>
    </el-table>

    <h2>表格添加删除按钮</h2>
    <el-table :data="list" style="width: 80%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="icon" label="头像">
        <template v-slot="scope">
          <img :src="scope.row.icon" alt="" width="100" />
        </template>
      </el-table-column>

      <el-table-column label="删除"> 
          <template v-slot=''></template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "mytable",
  data() {
    return {
      list: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          gender: 0,
          icon: "http://s02.mifile.cn/assets/static/image/logo-mi2.png",
        },
        {
          date: "2016-05-04",
          name: "张大坤",
          address: "上海市普陀区金沙江路 1517 弄",
          gender: 1,
          icon: "https://misc.360buyimg.com/lib/img/e/logo-201305-b.png",
        },
        {
          date: "2016-05-01",
          name: "刘文文",
          address: "上海市普陀区金沙江路 1519 弄",
          gender: 1,
          icon: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
        },
      ],
    };
  },
};
</script>

<style>
</style>